<template>
  <div>
    <div slot="header" class="clearfix">
      <el-input @change="filterDate" v-model.trim="formList.title" placeholder="根据用户名搜索"></el-input>
      <el-button @click="onColse" size="small">清除</el-button>
      <el-button @click="filterDate" size="small" type="primary">搜索</el-button>
      <slot name="right"></slot>
    </div>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark"><i class="el-icon-info icon"></i>共2条记录</div></el-col>
    </el-row>
    <UserAdd :form="form" @updateList="$emit('updataMethode')" :dialogFormVisible.sync="dialogFormVisible"></UserAdd>
  </div>
</template>

<script>
import UserAdd from './UserAddList'
import { list as list1 } from '../../api/base/users'
import { list } from '../../api/base/permissions'

export default {
  name: 'UserHeader',
  props: {
    form: {
      type: Object
    },
    type: {
      type: String
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      formList: {
        page: 1,
        title: ''
      }
    }
  },
  components: {
    UserAdd
  },
  methods: {
    async filterDate () {
      if (!this.formList.title) {
        this.$emit('updataMethode')
      }
      if (this.type) {
        const newList = await list1({ username: this.formList.title })
        this.$emit('updataList', newList.data.list)
      } else {
        const res = await list(this.formList)
        this.$emit('updataList', res.data.list)
      }
    },
    onColse () {
      if (this.type) {
        this.formList.title = ''
        this.$emit('updataMethode')
      } else {
        this.formList.title = ''
        this.$emit('updataMethode')
      }
    }
  }
}
</script>
<style scoped lang="less">

.box-card {
  margin: 20px;
.clearfix {
  height: 32px;
  line-height: 32px;
.el-input--medium {
  margin-right: 10px;
  width: 200px;
/deep/ .el-input__inner{
  height: 32px!important;
}
}
}
.el-row {
  margin-bottom: 20px;
&:last-child {
   margin-bottom: 0;
 }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
  font-size: 13px;
  padding-left: 8px;
  background-color: #f4f4f5;
  color: #909399;
  margin: 20px 0 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.icon {
  margin: 0 14px 0 10px;
  font-size: 16px;
}
}
</style>
